<template>
  <el-upload
    :id="fileKey"
    :key="fileKey"
    v-model="value"
    :data="qiniuDataObj"
    show-file-list
    :on-progress="beforeAvatarUpload"
    :on-preview="handlePictureCardPreview"
    :on-success="handleSuccess"
    :on-remove="handleRemove"
    :action="baseApi+'/file/upload'"
    :on-exceed="handleExceed"
    :file-list="showList"
    :limit="maxLimit"
    :disabled="isDisabled"
    multiple
    style="width: 180px"
  >
    <el-button v-if="!isDisabled" size="mini" type="primary">点击上传</el-button>
  </el-upload>
  <!--    <el-dialog key="imgShow" :visible.sync="dialogVisible" :modal="false">-->
  <!--      <img width="100%" :src="dialogImageUrl" alt="">-->
  <!--    </el-dialog>-->
</template>

<script>

  export default {
    props: {
      value: {
        type: String
      }, isDisabled: {
        default: false
      }, fileKey: {default: ''},
      maxLimit: {default: 20}
    },
    data() {
      return {
        showList: [],
        waitFileList: [],
        qiniuDataObj: {token: ''},
        fileUrl: process.env.VUE_APP__FILE_URL,
        baseApi: process.env.VUE_APP_FILE_UP_API,
        dialogImageUrl: null,
        dialogVisible: false,
        fileListSort: []
      }
    },
    watch: {
      value() {
        this.showList = []
        if (this.value != null) {
          var json
          try {
            json = JSON.parse(this.value)
          } catch (e) {
            json = [{url: this.value}]
            this.$emit('input', JSON.stringify([{url: this.value}]))
          }
          for (let j = 0; j < json.length; j++) {
            var httpUrl = json[j].url
            if (httpUrl.indexOf('http') !== 0) {
              // eslint-disable-next-line no-const-assign
              httpUrl = this.fileUrl + httpUrl
            }
            this.showList.push({
              name: json[j].name,
              url: httpUrl,
              response: {key: json[j].url}
            })
          }
        }
      },
      fileKey(newQuestion, oldQuestion) {
        this.showList = []
        if (this.value != null) {
          var json
          try {
            json = JSON.parse(this.value)
          } catch (e) {
            json = [{url: this.value}]
            this.$emit('input', JSON.stringify([{url: this.value}]))
          }
          for (let j = 0; j < json.length; j++) {
            var httpUrl = json[j].url
            if (httpUrl.indexOf('http') !== 0) {
              // eslint-disable-next-line no-const-assign
              httpUrl = this.fileUrl + httpUrl
            }
            this.showList.push({
              name: json[j].name,
              url: httpUrl,
              response: {key: json[j].url}
            })
          }
        }
      }
    },
    created() {
      this.showList = []
      if (this.value != null) {
        var json
        try {
          json = JSON.parse(this.value)
        } catch (e) {
          json = [{url: this.value}]
          this.$emit('input', JSON.stringify([{url: this.value}]))
        }
        for (let j = 0; j < json.length; j++) {
          var httpUrl = json[j].url
          if (httpUrl.indexOf('http') !== 0) {
            // eslint-disable-next-line no-const-assign
            httpUrl = this.fileUrl + httpUrl
          }
          this.showList.push({
            name: json[j].name,
            url: httpUrl,
            response: {key: json[j].url}
          })
        }
      }
    },
    methods: {
      beforeAvatarUpload(event, file, fileList) {
        this.fileListSort = fileList
      },
      handleExceed(files, fileList) {
        this.$message.warning(`只能上传`+maxLimit+'个文件，请重新上传')
      },
      // 放大显示图片
      handlePictureCardPreview(file) {
        console.log(file)
        if (file.response.key != null) {
          if (file.response.key.indexOf('http') === 0) {
            window.open(file.response.key)
          } else {
            window.open(this.fileUrl + file.response.key)
          }

        } else {
          window.open(this.fileUrl + file.response.data.address)
        }
      },
      // 上传成功回调
      handleSuccess(res, file, fileList) {
        if (this.waitFileList.length == 0 && this.value != null) {
          this.waitFileList = JSON.parse(this.value)
        }
        this.waitFileList.push({url: res.data.address, name: res.data.originalName})
        if (this.waitFileList.length == fileList.length) {
          var json = []
          for (let i = 0; i < fileList.length; i++) {
            json.push({"name": fileList[i].response.data.originalName, "url": fileList[i].response.data.address})
          }
          this.$emit('input', JSON.stringify(json))
          this.waitFileList = []
        }
      },
      // 删除回调
      handleRemove(file, fileList) {
        var json
        if (this.value == null) {
          json = []
        } else {
          try {
            json = JSON.parse(this.value)
          } catch (e) {
            json = [{url: this.value}]
          }
        }
        json.splice({url: file.url, name: file.name}, 1)
        if (json.length === 0) {
          this.$emit('input', null)
        } else {
          this.$emit('input', JSON.stringify(json))
        }
      }
    }
  }
</script>

<style scoped>

</style>
